<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Indexed DB</title>
<style>
body {
	font: normal 12px/2 Consolas, arial;
}

ul {
	list-style: decimal;
}

a {color: blue; cursor:pointer;}
</style>
</head>
<body>
<h2>Add a task</h2>
<div>
<form>
<input type="text" id="tasktext" name="tasktext" placeholder="please input a task" />
<button type="button" id="btn_addtask">Add</button>
</form>
</div>

<h2>My tasks</h2>
<ul id="mytasks">
</ul>


<script>

(function() {
	var dbname = 'indexeddb2';
	var dbversion = '1.99';

	var tasks = {
		db: null,
		init: function() {
			window.indexedDB = window.webkitIndexedDB || window.mozIndexedDB || window.indexedDB;
			
			if ('webkitIndexedDB' in window) {
				window.IDBTransaction = window.webkitIDBTransaction;
				window.IDBKeyRange = window.webkitIDBKeyRange;
			}
			
			var request = window.indexedDB.open(dbname, dbversion);
			request.onsuccess = function(e) {
				tasks.db = e.target.result;
				var db = tasks.db;
				if (dbversion != db.version) {
					var setVrequest = db.setVersion(dbversion);
					setVrequest.onerror = function(e) {
						console.log(e);
					};
					
					setVrequest.onsuccess = function(e) {
						if(db.objectStoreNames.contains('task')) {
							db.deleteObjectStore('task');
						}
					
						var store = db.createObjectStore('task',
							{keyPath: 'timeStamp'});
      
						tasks.showAllTasks();
					};
				} else {
					tasks.showAllTasks();
				}
			}
		}, 
		
		showAllTasks: function() {
			var todos = document.getElementById('mytasks');
			todos.innerHTML = '';
			
			var db = tasks.db;
			var trans = db.transaction(['task'], IDBTransaction.READ_WRITE);
			var store = trans.objectStore('task');
			
			// Get everything in the store;
			var keyRange = IDBKeyRange.lowerBound(0);
			var cursorRequest = store.openCursor(keyRange);
			
			cursorRequest.onsuccess = function(e) {
				var result = e.target.result;
				if(!result)
					return;
				
				showTask(result.value);
				result.continue();
			};
			
			cursorRequest.onerror = function(e) {
				console.log(e);
			};
		},
		
		addTask: function() {			
			var oTasktext = document.getElementById('tasktext');			
			var tasktext = oTasktext.value;
			
			var db = this.db;
			var trans = db.transaction(['task'], IDBTransaction.READ_WRITE);
			var store = trans.objectStore('task');
			
			var data = {
				'text': tasktext,
				'timeStamp': new Date().getTime()
			};
			
			var request = store.put(data);
			
			request.onsuccess = function(e) {
				oTasktext.value = '';
				tasks.showAllTasks();
			};
			
			request.onerror = function(e) {
				console.log(e);
			};
			
		}, 
		
		removeTask: function(taskId) {
			var db = this.db;
			var trans = db.transaction(['task'], IDBTransaction.READ_WRITE);
			var store = trans.objectStore('task');
			
			var deleteRequest = store.delete(taskId);
			deleteRequest.onsuccess = function(e) {
				tasks.showAllTasks();
			};
			deleteRequest.onerror = function(e) {
				console.log(e);
			}
		}
	};

	function showTask(task) {
		var mytasks = document.getElementById('mytasks');
		var li = document.createElement('li');
		var a = document.createElement('a');
		var t = document.createTextNode(task.text);
		
		a.addEventListener('click', function() {
			tasks.removeTask(task.timeStamp);
		}, false);
		
		a.textContent = ' [Delete]';
		li.appendChild(t);
		li.appendChild(a);
		mytasks.appendChild(li)
	}
	
	window.addEventListener('DOMContentLoaded', function() {
		tasks.init();
		
		document.getElementById('btn_addtask').onclick = function(e) {
			tasks.addTask();
		};
	}, false);
})();
</script>
</body>
</html>